<template>
  <el-dialog top="5vh" title="绑定商品" :visible.sync="dialogVisible" class="user_message_max" @open="openDialog">
    <el-table
      :data="tableData"
      ref="tableCom"
      border
      style="width: 100%"
      height="500"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="商品名称"> </el-table-column>

      <el-table-column prop="imageUrl" label="商品图片">
        <template slot-scope="{ row }">
          <div>
            <el-image style="width: 100px; height: 100px" :src="row.imageUrl" error="暂无图片"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
    </el-table>
    <div class="submitbtn">
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="formDataSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { userRules } from '@/utils/tools/RegExpression.js'
import authorityApi from '@/utils/tools/authorityApi/index.js'
import Dialog from './Dialog.js'

export default {
  components: {},
  name: 'spDialog',

  data() {
    return {
      userRules,
      spId: '',
      dialogVisible: false,
      tableData: [{}],
      checkedList: [],
      addFormData: {
        // 新建供应商表单
        userInfo: {}
        // // 公司信息
        // type: ''
      }
    }
  },
  methods: {
    formatter(row) {
      // <!-- 0企业 1政府机构 2事业单位 3社会团体 4其他 -->
      switch (row.type) {
        case 1:
          return '1类型'

        case 2:
          return '2类型'

        case 3:
          return '3类型'
      }
    },
    openDialog() {
      //获取所有商品
      authorityApi.bsCommodityApi.getAllList(
        {
          name: ''
        },
        (res) => {
          this.tableData = res || []
          authorityApi.bsSupplierApi.getSpApi({ id: this.spId }, (res) => {
            console.log(res, 'sss')
            // toggleRowSelection
            if (res?.length > 0) {
              this.$nextTick(() => {
                res.forEach((item) => {
                  let { id } = item
                  this.tableData.forEach((i) => {
                    if (i.id == id) {
                      this.$refs.tableCom.toggleRowSelection(i)
                    }
                  })
                })
              })
            }
          })
        }
      )
    },
    handleSelectionChange(val) {
      this.checkedList = val
    },
    formDataSubmit() {
      console.log(this.checkedList)
      let bsCommodityIds = this.checkedList.map((item) => item.id)
      authorityApi.bsSupplierApi.boundBsSupplierCommodity(
        { bsCommodityIds: bsCommodityIds, bsSupplierId: this.spId },
        (res) => {
          this.dialogVisible = false
          this.$emit('resetList')
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.submitbtn {
  margin: 0 auto;
  display: block;
  margin-top: 40px;
  text-align: center;
}
</style>

<style lang="less" scoped>
.user_message_max {
  .el-select {
    margin-left: 0 !important;
  }
}
/deep/.el-select {
  width: 100%;
}
</style>
